<template>
  <div>
    <ml-row :gutter="10">
      <ml-col class="margin-bottom">
        <ml-breadcrumb separator="/" style="line-height: 20px;">
          <ml-breadcrumb-item :to="{ name: 'Show' }">Show</ml-breadcrumb-item>
          <ml-breadcrumb-item :to="{ name: 'ShowList' }">列表</ml-breadcrumb-item>
          <ml-breadcrumb-item :to="{ name: 'ShowCreate' }">{{id?'编辑':'新建'}}</ml-breadcrumb-item>
        </ml-breadcrumb>
      </ml-col>
      <ml-col :span="12">
        <div class="create__planel">
          <div v-if="disabled" class="create__header">
            {{ShowParms.name}}
          </div>
          <div v-else class="create__header">
            {{id?'编辑':'新建'}}
          </div>
          <div class="create__content">
            <div>
              <label for="">名称</label>
              <ml-input :disabled="disabled" style="width:60%"  size="large" append  v-model="ShowParms.name"></ml-input>
              <div class="message">{{ validation.firstError('ShowParms.name') }}</div>
            </div>
            <div>
              <label for="">概要</label>
              <ml-input :disabled="disabled" style="width:60%"  size="large" append  v-model="ShowParms.overview"></ml-input>
            </div>
            <div>
              <label for="">描述</label>
              <ml-input :disabled="disabled" style="width:60%"  size="large" append  v-model="ShowParms.description"></ml-input>
            </div>
            <ml-button v-if="!disabled" :to="{ name: 'Show' }" class="mt-20" size="large" intent="">
              {{'取消'}}
            </ml-button>
            <ml-button v-if="!disabled" @click="saveShow" class="mt-20" size="large" intent="primary">
              {{id?'保存':'创建'}}
            </ml-button>
          </div>
        </div>
      </ml-col>
    </ml-row>
  </div>
</template>
<script>
import SimpleVueValidator from 'simple-vue-validator'
const Validator = SimpleVueValidator.Validator
export default {
  data () {
    return {
      filter: '',
      loading: false,
      id: this.$route.query.id,
      disabled: !!this.$route.query.look,
      show_id: '',
      user_id: '',
      ShowParms: {
        name: '',
        overview: '',
        description: ''
      }
    }
  },
  watch: {
  },
  mixins: [SimpleVueValidator.mixin],
  validators: {
    'ShowParms.name': function (value) {
      return Validator.value(value).required()
    }
  },
  mounted () {
    if (this.id) {
      this.getShowDetail()
    }
  },
  methods: {
    getShowDetail () {
      this.api.getShowDetail(this.id).then(res => {
        this.ShowParms = res
      })
    },
    saveShow () {
      var way = 'addShowMes'
      var message = '创建成功'
      if (this.id) {
        this.ShowParms.id = this.id
        way = 'editShowMes'
        message = '编辑成功'
      }
      this.$validate()
        .then((success) => {
          if (success) {
            var sendData = {}
            sendData = JSON.parse(JSON.stringify(this.ShowParms))
            this.api[way](sendData, this.id).then(res => {
              this.$router.push({ name: 'ShowList' })
            })
            this.$message({
              type: 'success',
              message: message
            })
          }
        })
    }
  }
}
</script>
<style lang="stylus" scoped>
@import "~@/stylesheets/vars"
  .create__content{
    div{
      label{
        width:160px;
        display inline-block
        text-align:right;
        margin-right 20px;
      }
    }
  }
  .host__list{
    min-height 47px;
    >label.host__list__label{
      line-height 43px;
    }
    .select__box{
      width:60%;
      display: inline-block;
      min-height 43px;
    }
  }
</style>
